
import Link from 'next/link';
import React from 'react';
import styles from '@/public/activity/Taohuajie.module.scss';
import { thj_data } from '@/public/activity/taohuajie_js';

// HOC
function WrappedComponent (Component){
    return class WrapCom extends React.Component{
        constructor (props){
            super(props)
        }
        render (){
            return <Component {...this.props} />
        }
    }
}

// 内容
function ProductPart (props){
    const { info, list } = props;
    return (
        <div className={[styles['product-list'], info.name.includes('满减') ? styles['manjian']:''].join(' ')}>
            <div className={styles['title']}>
                <h2>{info.name}</h2>
                <p>{info.short}</p>
            </div>
            <div className={styles['tips']}>{info.tips}</div>
            <div className={styles['list']}>
                {
                    list.map((item, index) => {
                        return (
                            <div className={styles['item']} key={index}>
                                <img src={item.img} alt="" />
                                <div className={styles['cnt']}>
                                    <Link href={item.url}>
                                        <a target="_blank">
                                            <h3 className={styles['name']}>{item.name}</h3>
                                        </a>
                                    </Link>
                                    <span className={styles['price']}>
                                        <i>￥</i><em>{item.price}</em>起
                                    </span>
                                    <Link href={item.url}>
                                        <a className={styles['btn']} target="_blank">点击开抢</a>
                                    </Link>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <Link href={info.targetUrl}>
                <a className={styles['more']} target="_blank">
                    <span>{info.targetTxt}</span>
                </a>
            </Link>
        </div>
    )
}

export default function Taohuajie (){
    
    const { title, tips } = thj_data;

    const Tejia = WrappedComponent(ProductPart);
    const Zaoding = WrappedComponent(ProductPart);
    const Manjian = WrappedComponent(ProductPart);

    return (
        <div className={styles['taohuajie-page']}>
            <div className='max-content'>

                <div className={styles['main-title']}>
                    <div>
                        <h2>{title.name}</h2>
                        <p>{title.short}</p>
                    </div>
                </div>

                {/* 特价直减 */}
                <Tejia {...thj_data['tejia']} />
                {/* 早定优惠 */}
                <Zaoding {...thj_data['zaoding']} />
                {/* 满减优惠 */}
                <Manjian {...thj_data['manjian']} />

                <div className={styles['main-tips']}>
                    <h2>{tips.name}</h2>
                    <p dangerouslySetInnerHTML={{__html: tips.short}}></p>
                </div>
            </div>
        </div>
    )
}